/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    useTheme,
    Button,
    useToast,
    LayerLoading,
    Text,Spinner,
    Navbar,
    Toolbar,
    IconButton,
    IconArrowLeft,
    MenuList,
    MenuItem,
    IconMoreVertical,
    IconRefButton,
    IconPackage,
    TwoHalfRightPanel,
    useMMenuBarOcup,
    IconCloud,
    VerticalMenu,
    DdMenuItem,
} from "customize-easy-ui-component";
import { InternalItemHandResult, OriginalViewProps, ReportViewProps } from "./comp/base";
//import { useCommitOriginalData } from "./db";
import { Link as RouterLink } from "../routing/Link";
import { EditStorageContext } from "./StorageContext";
//import { Link as RouterLink } from "wouter";
import { TransparentInput } from "../comp/base";
import { useThrottle } from "../hooks/useHelpers";
import useBuildTaskMutation from "../task/useBuildTaskMutation";
import useOriginalDataMutation from "./useOriginalDataMutation";
import {PreloadedQuery} from "react-relay/hooks";
import {DetailedGuideQuery} from "../device/__generated__/DetailedGuideQuery.graphql";
import useFlowReportMutation from "../inspect/useFlowReportMutation";
import useFlowToMutation from "./useFlowToMutation";
import {Opinion_Enum} from "./__generated__/useFlowToMutation.graphql";
import {useContext} from "react";
import RoutingContext from "../routing/RoutingContext";


/*
错误！ 本地重复定义了外部全局实例，结果本文件内只能看到 自己的EditStorageContext，而不是公用的哪一个。
export const EditStorageContext = React.createContext<EditStorageContextType | null>(
  null
);
*/


//必须通过prepared:{内嵌}传递，因为 路由器给出上一级组件 实际上中间还嵌入一层<RouteComponent/>的，所以算是非直接儿子的传递参数。
interface RecordStarterProps {
    prepared: {
        //数据
        source: any;
        //原始记录的模板：
        template: React.ReactElement<React.ForwardRefRenderFunction<InternalItemHandResult,OriginalViewProps>>;
    }
    routeData: any;
    children: React.ReactNode;
    ispId: string;
}
//是 右边半边页面的！，编辑，或原始记录的查看：
export const RecordStarter: React.FunctionComponent<RecordStarterProps> = ({
    ispId,
    routeData,
    prepared:{source, template, ...other2},
    children,
    ...other
 }) => {
    console.log("RecordStarter捕获,切花个source=", source,"routeData=",routeData,"template",template);
    console.log("RecordStarter捕获,切花个other2=", other2,"other=",other,"children",children);
  const theme = useTheme();
  const toast = useToast();
  //初始化不可以直接取React.useState(source || {})，不然路由器切换就变成旧source。新修改被抛弃了。
  const {storage, } =React.useContext(EditStorageContext);
    const { history } = useContext(RoutingContext);
  //const [enable, setEnable] = React.useState(true);
  //useState(默认值) ； 后面参数值仅仅在组件的装载时期有起作用，若再次路由RouterLink进入的，它不会依照该新默认值去修改show。useRef跳出Cpature Value带来的限制
//旧模式淘汰！  const ref =React.useRef<InternalItemHandResult>(null);

  //ref可以共用current指向最新输入过的子组件；但父组件对.current的最新变化无法实时感知，只能被动刷新获知current变动。
  //子组件利用useImperativeHandle机制把数据回传给父组件，配套地父辈用ref来定位子组件。
  //保存按钮点击后必须首先触发template动态加载的子组件即TemplateView的做1次render()后，ref.current.inp才能收到儿孙组件的最新数据。
//  const newOut={ ...(ref.current&&ref.current.inp) };

  //审核保存?对应数据deduction结论栏目＋审核手动修改；适用于出具正式报告，正式报告只读取deduction部分。依据审核保存>随后才是原始记录复检>初检data。
  //若复检保存 ，复检rexm，正检data。
/*  const {result, submit:updateFunc,loading } = useCommitOriginalData({
    id,  operationType:1,
    data:  JSON.stringify(storage || source) ,
    deduction:{emergencyElectric:'45,423'}
  });*/
    const {call:updateFunc,doing,result, called, reset}= useOriginalDataMutation();
    const {call:flowToFunc,doing:flowing, called:flowed, reset:flowreset}= useFlowToMutation();
  //console.log("RecordView捕获,切花source=", source,"新storage=",storage);

  async function updateRecipe(
    id: string ) {
    let yes= result && result.id;
    try {
      //提交给后端， 这里将会引起底层变动，导致本组件即将要render3次。有更新的4次。更新比读取多了1次render。
      await updateFunc(id, 1, JSON.stringify(storage || source) , `{emergencyElectric:'45,423'}`);
    } catch (err: any) {
      toast({
        title: "后端请求错",
        subtitle: err.message,
        intent: "error"
      });
      //很多错误是在这里捕获的。
      console.log("updateRecipe返回了,捕获err", err);
      return;
    }
    //这里无法获得result值，就算所在组件顶层已经获得result值，这里可能还是await () 前那样null;
    console.log("保存返回了＝", result,"yes=", yes);
    //除非用const {data: { buildTask: some }} = await updateFunc()捕捉当前操作结果; 否则这时这地方只能用旧的result,点击函数里获取不到最新结果。
    //须用其它机制，切换界面setXXX(标记),result？():();设置新的URL转场页面, 结果要在点击函数外面/组件顶层获得；组件根据操作结果切换页面/链接。
  }


  //const [throttledUpdateBackend, timer1]= useThrottle(updateRecipe,0);
  //延迟3秒才执行的; 可限制频繁操作，若很多下点击的3秒后触发2次。
  //【注意】延迟时间设置后，页面切换会报错，组件已经卸载，还来setEnable啊，状态错误！
  const {doFunc:throttledUpdateRecipe, ready} = useThrottle(updateRecipe,5000);
  const refEditor =React.useRef<InternalItemHandResult>(null);
  const {doFunc:throttleDoConfirm, ready:confirmEnable} =useThrottle((refEditor as any)?.current?.doConfirm);
  //const [throttledUpdateEnable, isReady] = useThrottle(setEnable, 5000);
  /*
  React.useEffect(() => {
    return () => {
      clearTimeout(timer2);
    };
  }, [timer2]);
  */
  //可是这里return ；将会导致子孙组件都会umount!! 等于重新加载==路由模式刷新一样； 得权衡利弊。
  // if(updating)  return <LayerLoading loading={updating} label={'正在获取后端应答，加载中请稍后'}/>;
  //管道单线图，数量大，图像文件。可仅选定URL，预览图像。但是不全部显示出来，微缩摘要图模式，点击了才你能显示大的原图。
  /*
  async function toSaveBackEnd() {
      //手机上更新模板TemplateView子组件重做render触发失效。只好采用延迟策略，每个分区项目的保存处理前准备，作一次render完了，才能发送数据给后端。
      setEnable(false);
      await updateRecipe('1');    //阻塞了await关键字只能用在aync定义的函数内。

    throttledUpdateEnable(true);
  }
*/
    const { carousel } = useMMenuBarOcup(false);
    const curFlow=sessionStorage['审批单']&&JSON.parse(sessionStorage['审批单']);
    if (!routeData.params.repId) {
    return null;
    }
    //【流转审批看得URL】
    const hrefR =`/reportView/EL-DJ/ver/1/${routeData.params.repId}?&print=1`;

  //无法把<EditStorageContext.Provider value={{storage,setStorage}}>放这附近能产生效果，必须提升到顶级路由组件内去做。
  return (
      <TwoHalfRightPanel
          title={
              (routeData.params.action==='ALL'|| routeData.params.action==='printAll') ?
                  <div css={{ marginLeft: "-0.75rem", flex: 1 }}>
                      <TransparentInput
                          autoComplete="off"
                          autoFocus
                          inputSize="md"
                          value={routeData.params.action}
                          placeholder="报告的详细可打印信息"
                          aria-label="Recipe title"
                          onChange={e => {
                          }}
                      />
                  </div>
                 :
                  <Text
                      css={{
                          flex: 1,
                          textAlign: "center",
                          "@media (min-width:800px)": {
                              textAlign: "left"
                          }
                      }}
                      wrap={false}
                      variant="h5"
                      gutter={false}
                  >
                      报告ID：{routeData.params.repId}
                  </Text>
          }
          back={
              <RouterLink  href={`/report/${routeData.params.template}/ver/${routeData.params.verId}/${routeData.params.repId}`}>
                  <IconButton  noBind
                               icon={<IconArrowLeft />}
                               label="后退"
                               variant="ghost"
                               css={{
                                   marginRight: theme.spaces.sm,
                                   "@media (min-width:800px)": {
                                       display: "none"
                                   }
                               }}
                  />
              </RouterLink>
          }
          menu={
              <VerticalMenu>
                  <DdMenuItem label="保存到服务器" disabled={!ready} onClick={(e) => {
                      throttledUpdateRecipe!(routeData.params.repId)
                  }} />
                  <DdMenuItem label="全部项目一起确认" disabled={!confirmEnable} onClick={(e) => {
                      if(throttleDoConfirm)  throttleDoConfirm(true);
                      else (refEditor as any).current!.doConfirm(true);
                  }} />
                  <DdMenuItem label="检验员签字转入流转主页(流程)" disabled={ !(curFlow?.entId===routeData.params.repId) } onClick={(e) => {
                      flowToFunc( curFlow?.utId , routeData.params.repId,3,hrefR,'测ok2');
                      toast({title: "报告签字完成"});
                      //签字成功与否，都将可直接清空session状态; 不支持并发进行多个审批单子或多份报告同时进入审核工作范围。一个时间点只能一条审批事项。
                      sessionStorage['审批单'] =null;
                  }} />
                  <DdMenuItem label="流转(流程)" onClick={async () => {
                      const lzurl=`/report/${routeData.params.template}/ver/${routeData.params.verId}/${routeData.params.repId}/flowSelect`;
                      await history.push(lzurl, {});
                  }} />
                  <DdMenuItem label="预览报告"
                         onClick={()=> history.push(`/reportView/${routeData.params.template}/ver/${routeData.params.verId}/${routeData.params.repId}`)
                    } />
              </VerticalMenu>
          }
          css={{
              "@media print": {
                  display: "none"
              }
          }}
      >

      <div  css={{
        "@media not print": {
          display: "none"
        }
      }}>
        <Text variant="h4" css={{textAlign:'center'}}>福建省特种设备检验研究院</Text>
         <Text>
         本原始记录对应的报告模板类型：{routeData.params.template}，版本：{routeData.params.verId}，报告ID：{routeData.params.repId}
         </Text>
        <hr/>
      </div>
      {
        //useMemo使用后：各分区项目子组件inp各自独立的，分区项目子组件内若使用setInp(null) 清空重置后，无法靠重新拉取后端数据来保证恢复显示。
        //项目子组件使用setInp(null) 重置后，若上级组件重新取后端数据没变化的，也必须再次路由后再进入才可以让各分区项目子组件render恢复显示数据。
          template && React.cloneElement(template as React.ReactElement<any>, {
          ref: refEditor,
          inp: source,
          action: routeData.params.action,
          repId: routeData.params.repId,
        })
      }
     {/*确认修改按钮，需要每个当前检验项目的编辑器inp，所以无法提升到这个层次做触发*/}
      <Button
        css={{ marginTop: theme.spaces.md }}
        size="lg"  intent={'warning'}
        disabled ={!ready}
        onPress={ ()=>throttledUpdateRecipe!(routeData.params.repId) }
      >保存到服务器</Button>
        <RouterLink href={`/inspect/${ispId}`}>
        返回本次检验
        </RouterLink>
      <Spinner doing={doing} carousel={carousel}/>

      </TwoHalfRightPanel>
  );
}


export default RecordStarter;
